<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <style>
        #div {
            width: 400px;
            height: 100px;
            border: 1px red solid;
        }
    </style>
</head>


<body>

    <div id="div"></div>

    <script>

        const div = document.getElementById('div')

        // ===========================  1. 对于指定回调函数的方式更加的灵活  =====================

        //在没有Promise之前, 异步编程的回调函数需要在异步任务启用前指定
        /* function callback (getData) {
            console.log(getData)
            div.innerText = JSON.stringify(getData)
            return getData
        }

        setTimeout(()=>{
            let data = {
                name: 'Fitz',
                age: 21
            }
            callback(data)
        }) */


        // promise不仅可以在启动异步任务前和后指定回调函数, 甚至可以在启动异步任务后任意需要结果的时刻定义回调函数

        // 在启动异步任务前指定回调函数
        /* function callback(getData) {
            console.log(getData)
            div.innerText = JSON.stringify(getData)
            return getData
        }

        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                let data = {
                    name: 'Fitz',
                    age: 21
                }
                callback(data)
                resolve(data)
            })
        })
            // 在启动异步任务后指定回调函数
            .then(
                r => {
                    console.log(r)
                    return r
                },
                e => console.log(e)
            )

        // 在启动异步任务后任意需要结果的时刻定义回调函数
        setTimeout(() => {
            p.then(
                r => console.log(r),
                e => console.log(e)
            )
        }, 2000) */


        // ===========================  2. 解决回调地狱  =====================

        // 没有Promise之前, 假如一个异步任务需要另一个异步任务所返回的结果就会产生回调函数嵌套
        // 当嵌套的层数过多的时候就产生回调地狱

        /* setTimeout(() => {
            let data = 'Fitz'
            setTimeout((data) => {
                console.log('依赖与第一个异步任务的data', data)
                data2 = data + 'love Lx'
                setTimeout((data2) => {
                    console.log('依赖与第一个异步任务 和 第二个异步任务 的data', data2)
                }, 1500, data2)
            }, 1500, data)
        }, 1500) */

        // Promise中的then()方法可以链式调用, 而链式调用有效的解决了回调地狱的问题
        new Promise((resolve, reject) => {
            let data = 'Fitz'
            setTimeout(() => {
                resolve(data)
            }, 1500)
        })
            .then(
                r => {
                    return new Promise((resolve, reject)=>{
                        setTimeout(() => {
                            console.log('依赖与第一个异步任务的data', r)
                            resolve(r + 'love Lx')
                        }, 1500)
                    })
                },
                e => console.log(e)
            )
            .then(
                r => {
                    setTimeout(() => {
                        console.log('依赖与第一个异步任务 和 第二个异步任务 的data', r)
                    }, 1500)
                },
                e => console.log(e)
            )

    </script>
</body>

</html>